<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Settings</title>
    <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.9.2.custom.min.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery-ui-timepicker-addon.css" />
    <style type="text/css">
    body {
    	font-family: Calibri;
    	font-size: 16px;
    }
    select {
    	width: 80px;
    	border:1px solid #CCCCCC;
    }
    input {
    	width:80px;
    	border:1px solid #CCCCCC;
    }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	 $('#submit').click(function(){
    		 var setting = {sw:""};
    		 setting.sw = $('#switch').val();

        	 $.ajax({
        		url:"setting",
        	 	type:"POST",
        	 	data:setting,
        	 	error:function(jqXHR, textStatus, errorThrow){
        	 		alert('Error: ' + errorThrow);
        	 	},
        	 	success: function(data){
        	 		alert(data);
        	 	}
        	 });
    	 });
    });
    </script>
  </head>
  <body>
    <h1>Settings</h1>
    <table>
      <tbody>
	      <tr>
	        <td>Switch:</td>
	        <td><select id="switch" name="switch">
	        	<option value="on">ON</option>
	        	<option value="off">OFF</option>
	        </select></td>   
	      </tr>
	      <tr>
	      	<td colspan="2">
	      		<input type="button" id="submit" name="submit" value="Submit" />
	      	</td>
	      </tr>
      </tbody>
    </table>
  </body>
</html>
